<template>
    <ClientOnly>
        <popup
            :show="visible"
            :async-close="true"
            title="添加团队成员"
            width="600px"
            @close="emits('close')"
            @confirm="handleConfirm"
        >
            <div class="py-6 px-8 min-h-[160px]">
                <div class="flex justify-center">
                    <div class="w-[360px]">
                        <el-input
                            v-model="keyword"
                            placeholder="请输入需要添加的用户编号"
                            :suffix-icon="Search"
                            @keyup.enter="handleEnter"
                        />
                        <p v-if="error" class="mt-1 text-sm text-error">
                            {{ error }}
                        </p>
                    </div>
                </div>
                <div v-if="members.length > 0" class="mt-4">
                    <el-table :data="members" size="large">
                        <el-table-column label="成员" min-width="100">
                            <template #default="scope: { row: MemberType }">
                                <div class="flex items-center">
                                    <el-avatar :src="scope.row.avatar" style="flex-shrink: 0;" />
                                    <div class="ml-2">
                                        <p>{{ scope.row.nickname }}</p>
                                        <p class="text-xs text-tx-placeholder">{{ scope.row.sn }}</p>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="查看者" prop="power" width="80">
                            <template #default="scope: { row: MemberType }">
                                <div class="text-center">
                                    <el-radio
                                        v-model="scope.row.power"
                                        :value="1"
                                        size="large"
                                    />
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="编辑者" width="80">
                            <template #default="scope: { row: MemberType }">
                                <div class="text-center">
                                    <el-radio
                                        v-model="scope.row.power"
                                        :value="2"
                                        size="large"
                                    />
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="管理者" width="80">
                            <template #default="scope: { row: MemberType }">
                                <div class="text-center">
                                    <el-radio
                                        v-model="scope.row.power"
                                        :value="3"
                                        size="large"
                                    />
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="80">
                            <template #default="{ $index }">
                                <el-button
                                    type="danger"
                                    link
                                    @click="handleDelete($index)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </popup>
    </ClientOnly>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import knowTeamedApi from '~/api/agent/know/teamed'
import robotTeamedApi from '~/api/agent/robot/teamed'

interface MemberType {
    sn: string,
    avatar: string,
    nickname: string,
    power: number
}

const emits = defineEmits(['confirm', 'close'])
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    type: {
        type: String,
        default: 'robot'
    },
    code: {
        type: String,
        default: ''
    }
})

const visible = ref<boolean>(false)
const members = ref<MemberType[]>([])
const keyword = ref<string>('')
const error = ref<string>('')

/**
 * 处理回车
 *
 * @author zero
 */
const handleEnter = async () => {
    if (members.value.length > 5) {
        return feedback.msgError('单次添加最多5个成员!')
    }

    let result: any = {}
    if (props.type === 'robot') {
        result = await robotTeamedApi.find_user({
            ap_code: props.code,
            keyword: keyword.value
        })
    } else if (props.type === 'know') {
        result = await knowTeamedApi.find_user({
            ap_code: props.code,
            keyword: keyword.value
        })
    }

    if (result.code === 0) {
        error.value = ''
        const data = result.data
        const exists = members.value.some((item: { sn: any; }) => item.sn === data.sn)
        if (!exists) {
            members.value.push({
                sn: data.sn,
                avatar: data.avatar,
                nickname: data.nickname,
                power: 1
            })
        }
    } else {
        error.value = result.msg
    }
}

/**
 * 处理确认
 *
 * @author zero
 */
const handleConfirm = () => {
    if (members.value.length <= 0) {
        return feedback.msgError('请至少添加1个成员!')
    }
    emits('confirm', members.value)
}

/**
 * 处理删除
 *
 * @param index
 * @author zero
 */
const handleDelete = (index: number) => {
    members.value.splice(index, 1)
}

/**
 * 监听弹窗
 */
watch(
    () => props.show,
    async (val) => {
        visible.value = val
        members.value = []
        keyword.value = ''
        error.value = ''
    }
)
</script>
